<template>
	<view class="page-content">
		<u-navbar title="店铺详情" autoBack bgColor="#D9EDD4" fixed safeAreaInsetTop placeholder>
			<u-icon size="22" slot="right" class="share-icon" name="/static/images/goods/detail/icon_detail-share.png"></u-icon>
		</u-navbar>
		
		<view class="content">
			<view class="goods-shop">
				<view class="shop-top">
					<view class="shopInfo-left">
						<u-avatar shape="square" size="54" src="/static/images/avatar/avatar-ring.jpg"></u-avatar>
						<view class="shopInfo-box">
							<view class="shopInfo-row1">
								<view class="shop-name">{{goodsData[0].shop}}</view>
								<view class="shop-grade">4.6</view>
							</view>
							<view class="shopInfo-row2">
								<view class="shop-rang">卖家口碑</view>
								<u-rate size="12" gutter="1" :count="5" v-model="rateValue"></u-rate>
							</view>
							<view class="shopInfo-row3">
								粉丝：8.2万
							</view>
						</view>
					</view>
					<view class="shop-right">
						关注
					</view>
				</view>
				<view class="shop-btm">
					<view class="btm-sure">
						<u-icon size="23" name="/static/images/goods/detail/icon_detail-sure.png"></u-icon>
						<text class="shop-sure">店铺保障</text>
					</view>
					<view class="btm-text">
						<view class="right-1">
							<u-icon size="15" name="/static/images/goods/detail/icon_detail-yes.png"></u-icon>
							<text class="right-text">免运费</text>
						</view>
						<view class="right-2">
							<u-icon size="15" name="/static/images/goods/detail/icon_detail-yes.png"></u-icon>
							<text class="right-text">官方正品</text>
						</view>
						<view class="right-3">
							<u-icon size="15" name="/static/images/goods/detail/icon_detail-yes.png"></u-icon>
							<text class="right-text">极速退款</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="goodList">
				<view class="goods">
					<view class="goodBox" v-for="(item,index) in goodsData" :key="index" @click="goToDetail(item)">
						<view class="goodTop">
							<image class="goodImg" :src="item.content.slice(item.content.indexOf(']')+2,item.content.indexOf('￥')+5)" mode="aspectFill" width="170"></image>
						</view>
					
						<view class="goodBottom">
							<text class="goodName">{{item.travelName}}</text>
							<text class="goodDetail">{{item.summary}}</text>
							<text class="goodPrice">石友价：￥{{item.price}}万</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				rateValue:4,
				shop: '',
				goodsData:[]
			}
		},
		onLoad(e) {
			this.shop = e.shop
			this.getShopList()
		},
		methods:{
			// 得到店铺商品数据
			getShopList(){
				uni.request({
					url: 'http://localhost:3000/travel/getTravelByShop',
					data: {
						shop: this.shop,
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							this.goodsData = res.data.data;
						} else {
							this.$u.toast(res?.data?.data?.message);
						}
					},
					fail: (res) => {
						this.$u.toast(res?.data?.msg);
					}
				})
			},
			//跳转到商品详情页面
			goToDetail: function(item) {
				uni.navigateTo({
					url: "/pages/goods/detail?travelId="+item.travelId,
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page-content{
		.content{
			.goods-shop {
				background-color: $gs-jpBg;
				border-radius: 10px;
				padding: $uni-spacing-col-base $uni-spacing-row-lg;
				margin: $uni-spacing-col-base $uni-spacing-row-lg;
				.shop-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: $uni-spacing-col-base 0;
					.shopInfo-left{
						display: flex;
						padding: 0 $uni-spacing-row-base;
						.shopInfo-box{
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 0 $uni-spacing-row-base;
							.shopInfo-row1{
								display: flex;
								.shop-name{
									font-size: $uni-font-size-base;
									color: $uni-text-color;
								}
								.shop-grade{
									font-size: $uni-font-size-sm;
									color: $uni-color-warning;
								}
							}
							.shopInfo-row2{
								display: flex;
								.shop-rang{
									font-size: $uni-font-size-sm;
									color: $gs-color-grey;
								}
							}
							.shopInfo-row3{
								font-size: $gs-font-sm;
								color: $gs-color-grey;
							}
						}
					}
					.shop-right{
						background-color: $gs-color-green;
						border-radius: 12px;
						padding: $uni-spacing-col-sm $uni-spacing-row-base;
						font-size: $uni-font-size-sm;
						color: $uni-text-color-inverse;
					}
				}
				.shop-btm{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: $uni-spacing-col-sm 0;
					.btm-sure{
						display: flex;
						align-items: center;
						padding: 0 $uni-spacing-row-sm;
						.shop-sure{
							font-size: $uni-font-size-sm;
							color: #1B7006;
							padding: 0 $uni-spacing-row-sm;
						}
					}
					.btm-text{
						display: flex;
						align-items: center;
						.right-1,.right-2,.right-3{
							display: flex;
							.right-text{
								font-size: $uni-font-size-sm;
								color: $gs-color-grey;
								padding: 0 $uni-spacing-row-sm;
							}
						}
					}
				}
			}
			
			.goodList{
				margin: $uni-spacing-row-lg;
				.goods{
					display: grid;
					grid-template-columns: 1fr 1fr;
					grid-gap: 30rpx;
					padding-top: 8rpx;
					.goodBox {
						width: 172px;
						height: 262px;
						box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.1);
						.goodTop {
							.goodImg {
								width: 100%;
								height: 172px;
								border-radius: 10rpx 10rpx 0 0;
							}
						}
						.goodBottom {
							background-color: #fff;
							border-radius: 0 0 20rpx 20rpx;
							display: flex;
							flex-direction: column;
							padding: 20rpx;
							position: relative;
							top: -3px;
							.goodName {
								font-size: 20px;
							}
							.goodDetail{
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
							.goodPrice {
								color: red;
								font-size: 16px;
							}
						}
					}
				}
			}
		}
	}
</style>